<template>
  <view class="AddPlan">
    <view
      class="addPlanBtn"
      :class="['addPlanBtn', openFlag ? 'AddPlanActive' : '']"
      @click="openFlag = !openFlag"
    >
      <text class="Add">+</text>
    </view>
    <view
      :class="['operator', openFlag ? 'shareBtnActive' : '']"
      @click="showAddPlanDialog(1)"
    >
      <image src="../../../static/icons/share.png" class="icon"></image>
    </view>
    <view
      :class="['operator', openFlag ? 'addBtnActive' : '']"
      @click="showAddPlanDialog(0)"
    >
      <image src="../../../static/icons/write.png" class="icon"></image>
    </view>
  </view>
</template>

<script>
export default {
  name: "AddPlan",
  data() {
    return {
      openFlag: false,
    };
  },
  methods: {
    showAddPlanDialog(type) {
      this.$emit("showAddPlanDialog", type);
    },
  },
};
</script>

<style lang="scss" scoped>
.AddPlan {
  .addPlanBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 50rpx;
    bottom: 250rpx;
    width: 100rpx;
    height: 100rpx;
    color: #fff;
    background-color: #05a47d;
    border-radius: 50%;
    font-size: 60rpx;
    border: 1px solid gray;
    box-shadow: 10rpx 10rpx 15rpx rgba(0, 170, 255, 0.1);
    z-index: 100;
  }
  .AddPlanActive {
    animation: btnScale 0.5s ease-in-out;
  }
  .operator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 70rpx;
    height: 70rpx;
    right: 60rpx;
    bottom: 270rpx;
    background-color: #fff;
    border: 1px solid #05a47d;
    border-radius: 50%;
    box-shadow: 10rpx 10rpx 15rpx rgba(0, 170, 255, 0.1);
    transition: all 0.5s;
    z-index: 99;
    .icon {
      width: 50rpx;
      height: 50rpx;
    }
  }
  .shareBtnActive {
    transform: translate(-100rpx, -100rpx);
  }

  .addBtnActive {
    transform: translate(-100rpx, 110rpx);
  }

  @keyframes btnScale {
    0% {
      transform: scale(1);
    }

    25% {
      transform: scale(0.8);
    }

    50% {
      transform: scale(1.1);
    }

    75% {
      transform: scale(0.8);
    }

    100% {
      transform: scale(1);
    }
  }
}
</style>
